<template>
	<view class="sport-vip">
		<myLoading></myLoading>
		<image class="sport-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/a0eb816a3ba04976b5e885a0cafbbf85.png" ></image>
		<view class="sport-vip-tab" :style="[{height},{lineHeight},{boxSizing}]">
			<view class="demo" :style="[{background},{color},{height},{paddingTop},{lineHeight},{boxSizing}]">
				<view class="left-icon" :style="[{height},{lineHeight}]" @click="onBack">
					<image class="icon-image" src="https://image.nanjingtouyang.com/touy/2024/05/06/c760f1bcfa504a31ad46deb8e763962c.png" ></image>
				</view>
				<view class="demo-title">邀约详情</view>	
			</view>
		</view>
		
		<view class="sport-box" :style="[{marginTop}, {paddingTop}]">
			<view class="charts-box">
				<view class="yaoyue-type" v-show="yaoyueDetail.quantity==2">{{ yaoyueDetail.transWayLabel }}</view>
				
				<view class="yaoyue-view">
					<view class="charts-box-head">
						<view class="head-box">
							<image v-if="yaoyueDetail.userAvatar" class="username-image" :src="yaoyueDetail.userAvatar"></image>
							<image v-else class="username-image" src="https://image.nanjingtouyang.com/touy/2023/09/2023090515054870864.png" mode=""></image>
							<image v-if="yaoyueDetail.userSex" class="user-sex-icon" src="https://image.nanjingtouyang.com/touy/2024/02/21/07e48f057c924ddfb9d72ce5d5bc61b0.png" mode=""></image>
							<image v-else class="user-sex-icon" src="https://image.nanjingtouyang.com/touy/2024/02/21/d8ec51ceecc34ac19cfbdd7841b881cb.png" mode=""></image>
						</view>
						<view class="head-title">
							<text class="head-title-name">{{ yaoyueDetail.userName }}</text>
							<text class="head-title-old">{{ yaoyueDetail.userAge }}岁</text>
						</view>
						<image @click="callPeople" class="head-phone" src="https://image.nanjingtouyang.com/touy/2024/05/08/271423e95a4346178f0c46e4837c0c52.png" mode=""></image>
					</view>
					
					<!-- 预约流程 -->
					<view class="tags-line">
						<view class="tags-title">
							<view class="title">当前节点</view>
						</view>
						<view class="tags-line-view">
							<scroll-view class="choose-scroll" scroll-x="true">
								<view class="choose-line"></view>
								<view 
									v-for="(item, index) in yaoyueDetail.stepList"
									:key="index"
									class="choose-item"
									>
									<image v-if="item.status == 'wait'" class="choose-icon" src="https://image.nanjingtouyang.com/touy/2024/05/20/86554e6c7510404b90148d66478e4804.png" mode=""></image>
									<image v-else class="choose-icon" src="https://image.nanjingtouyang.com/touy/2024/05/07/dfdfe1a3d0f94becb58e4304eede3010.png" mode=""></image>
									<view class="choose-text">
										{{ item.title }}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					
					<!-- 拒绝理由 -->
					<view class="reason-view" v-show="yaoyueDetail.statusReason">
						<view class="reason-view-box">
							{{ yaoyueDetail.statusReason }}
						</view>
					</view>
				</view>
			</view>

			<!-- 邀请详情-->
			<view class="coach-user">
				<view class="user-box">
					<!-- 邀请宣言 -->
					<view class="slogan-view" v-show="yaoyueDetail.quantity==2">
						<view class="slogan-view-box">
							<image class="slogan-title" src="https://image.nanjingtouyang.com/touy/2024/05/08/4f993e32f7c84117957bb1e7f55709c9.png" mode=""></image>
							<view class="slogan-text">
								{{ yaoyueDetail.instDcl }}
							</view>
						</view>
					</view>
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/277a497be71a4daf9f815569aff49818.png" mode=""></image>
						</view>
						<view class="title-right" >
							<view class="right-top">
								<!-- <view class="top-title">预约场馆</view> -->
								<view class="top-title" v-if="yaoyueDetail.serviceType == 1">预约场馆</view>
								<view class="top-title" v-else>预约地址</view>
								<view class="top-place">
									<image class="place-icon" src="https://image.nanjingtouyang.com/touy/2024/05/21/f5ed4850370d4943b01402571f676cf9.png" mode=""></image>
									<view class="right-bottom-text" @click="toLocation()">{{ yaoyueDetail.distanceLabel }}</view>
								</view>
							</view>
							<view class="right-bottom">
								<view class="bottom-title">{{ yaoyueDetail.shopName || yaoyueDetail.addr }}</view>
								<!-- <image class="price-icon" src="https://image.nanjingtouyang.com/touy/2024/05/07/12b225557c474f05ba9e44fd0f5de6e3.png" mode=""></image> -->
							</view>
						</view>
					</view>
					
					
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/91aee2a7c6d74600a25aa9eb70b8ef92.png" mode=""></image>
						</view>
						<view class="title-right">
							<view class="right-top">
								<view class="top-title">预约时间</view>
							</view>
							<view class="right-bottom">
								<view class="bottom-title">{{ yaoyueDetail.aptTime }}</view>
							</view>
						</view>
					</view>
					
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/ad989abc4d6648be870568a4065f71d5.png" mode=""></image>
						</view>
						<view class="title-right">
							<view class="right-top">
								<view class="top-title">服务时长</view>
							</view>
							<view class="right-bottom">
								<view class="bottom-title">{{ yaoyueDetail.serviceTime }}分钟/次</view>
							</view>
						</view>
					</view>
					
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/522bec74a76e4a538e18bd5568fcba75.png" mode=""></image>
						</view>
						<view class="title-right" @click="toCoachDetail">
							<view class="right-top">
								<view class="top-title">教练</view>
							</view>
							<view class="right-bottom">
								<view class="bottom-title">{{ yaoyueDetail.spName }}</view>
								<!-- <image class="price-icon" src="https://image.nanjingtouyang.com/touy/2024/05/07/12b225557c474f05ba9e44fd0f5de6e3.png" mode=""></image> -->
							</view>
						</view>
					</view>
					
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/fbd1fe0093754e9b9926cafb41efb881.png" mode=""></image>
						</view>
						<view class="title-right">
							<view class="right-top">
								<view class="top-title">项目</view>
							</view>
							<view class="right-bottom">
								<view class="bottom-title">{{ yaoyueDetail.aptItem }}</view>
							</view>
						</view>
					</view>
					
					<view class="activity-detail-box" >
						<view class="user-box-title">
							<image class="title-bg" src="https://image.nanjingtouyang.com/touy/2024/05/08/ba9643abd0624b68841de2f41b3f4a2e.png" mode=""></image>
						</view>
						<view class="title-right">
							<view class="right-top">
								<view class="top-title">已报名</view>
								<view class="top-num">（{{ yaoyuePeopleLength }}/{{ yaoyueDetail.quantity }}）</view>
							</view>
							<view class="bottom-users" v-for="(item, index) in yaoyueDetail.joinUserList" :key="index" @click="toUserPage(item)">
								<image v-if="item.userAvatar" class="user-icon" :src="item.userAvatar"></image>
								<image v-else class="user-icon" src="https://image.nanjingtouyang.com/touy/2023/09/2023090515054870864.png" mode=""></image>
								<view class="user-name">									<view class="user-name-text">										{{ item.userName }}									</view>									<view class="user-name-line">										{{ item.joinOrdDesc }}									</view>																	</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		
		<!-- <view class="buttom-buttons">
			<view class="buttons-baoming" @click="$noMultipleClicks(toReser)">申请报名</view>
		</view>
		 -->
		
	</view>
</template>

<script>
	import { getYaoYueDetail } from '@/api/index.js'
	export default {
		data() {
			return {
				
				height: 0,
				paddingTop: 0,
				lineHeight: 0,
				marginTop: 0,
				boxSizing: 0,
				noClick:true,
				coachList: [
					{ id: 1, name: '邀请人预约'},
					{ id: 2, name: '用户报名'},
					// { id: 3, name: '邀请人选择报名人'},
					{ id: 4, name: '报名人付款'},
					{ id: 5, name: '教练接单'},
					{ id: 6, name: '场馆接单'},
					{ id: 7, name: '教练核销'},
					{ id: 8, name: '场馆核销'},
					{ id: 9, name: '开始训练'},
				],
			
				yaoyueId: '',
				yaoyueDetail: '',
				yaoyuePeopleLength: ''
				
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top + "px" 
			this.lineHeight = demo.height +'px'
			this.marginTop = demo.height + 'px'
			this.boxSizing = 'border-box'
		},
		onLoad(option) {
			this.yaoyueId = option.id
			this.getYaoYueList()
		},
		
		methods: {
			getYaoYueList() {
				getYaoYueDetail({
					aptId: this.yaoyueId,
					// longitude: uni.getStorageSync('longitude'),
					// latitude: uni.getStorageSync('latitude'),
				}).then(res => {
					this.yaoyueDetail = res.data.data
					this.yaoyuePeopleLength = this.yaoyueDetail.joinUserList.length
				})
			},
			// 左侧返回按钮调用
			onBack() {
				// this.$emit("onBack")
				uni.navigateBack()
			},
			toReser() {
				joinApt({
					aptId: this.yaoyueDetail.aptId
				}).then(res => {
					if(res.data.code == 200) {
						uni.showToast({
							title:'报名已提交，等待邀请人同意',
							icon:'none'
						})
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
					
				})
				
				// uni.navigateTo({
				// 	url:'../../package-coach/coach-order/index'
				// })
			},
			getLocationList() {
				var that = this
				uni.showModal({
				  title: '提示',
				  content: '需要获取用户位置信息权限',
				  confirmText: '前往设置',
				  confirmColor: '#3F8E5E',
				  success(res) {
				    if (res.confirm) {
				     uni.openSetting({
				       success(res) {
				         // 操作完成后，检查用户是否授权该权限
				         if (res.authSetting['scope.userLocation']) {
							 	
							 	let location = {
							 		longitude: 0,
							 		latitude: 0,
							 	}
							 
							 	uni.getLocation({
							 		type: "gcj02",
							 		success(res) {
							 			location.longitude = res.longitude
							 			location.latitude = res.latitude
							 			uni.setStorageSync('longitude', location.longitude)
							 			uni.setStorageSync('latitude', location.latitude)
							 		
							 			const qqmapsdk = new QQMapWX({
							 				key: 'SBBBZ-CF3W4-ISNUN-KFKP2-FNFR2-AJFK5'
							 			})
							 			qqmapsdk.reverseGeocoder({
							 				location,
							 				sig:'g4szVHEVqnQqnj49rsmI7yewIJJPWDW',
							 				success(response) {
							 					let info = response.result
							 					that.cityName = info.ad_info.city
							 					uni.setStorageSync('City_Name', info.ad_info.city)
							 					getCity().then(res => {
							 						res.data.data.city.forEach(item => {
							 							item.list.forEach(items => {
							 								if(items.name == info.ad_info.city) {
							 									uni.setStorageSync('City_Code', items.code)
							 									that.getYaoYueDetail()
							 								}
							 							})
							 						})
							 						
							 					})
							 				}
							 			})
							 		}
							 	})
				         }
				       }
				     })
				    }
				  }
				})
			
			},
		
			
			
			toShopDetail() {
				uni.navigateTo({
					url:'../../package-shop/detail/index?id=' + this.yaoyueDetail.shopId
				})
			},
			toCoachDetail() {
				uni.navigateTo({
					url:'../../package-coach/coach-detail/index?id=' + this.yaoyueDetail.spId
				})
			},
			callPeople() {
				uni.makePhoneCall({
					phoneNumber: this.yaoyueDetail.userPhone
				})
			},
			toLocation() {
				uni.openLocation({
					latitude: this.yaoyueDetail.latitude, 
					longitude: this.yaoyueDetail.longitude,
					name: this.yaoyueDetail.shopName,
					address: this.yaoyueDetail.addrDesc
				})
			},
			toUserPage(item) {
				if(uni.getStorageSync('userId')){
					if(uni.getStorageSync('uid') == item.userId) {
						uni.switchTab({
							url:'/pages/index/my'
						})
					} else {
						uni.navigateTo({
							url:'../../package-user/user-homepage/index?userId=' + item.userId
						})
					}
				} else {
					uni.navigateTo({
						url:'../../pages/index/login?fromActivity=1'
					})
				}
			},
			
			
		}
	}
</script>

<style lang="scss">
	@import './yaoyue-detail.scss';
</style>